<template>
  <el-col :span="Number(colspan)">
    <el-form-item
      :prop="name"
      :label="labelTitle"
      :title="labelTitle"
      v-if="ishide"
    >
      <el-select
        :disabled="eleDisabled"
        style="width:100%"
        @change="onChange"
        @visible-change="selectData"
        :name="name"
        :clearable="clearable"
        v-model="selValue"
        filterable
        :placeholder="placeholder"
        :size="size"
      >
        <el-option
          v-for="(item,index) in selectoptions"
          :key="item[`${selectKey}`]"
          :label="item[`${selectLable}`]"
          :disabled="item.disabled"
          :value="item[`${selectKey}`]"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
</template>

<script type="es6">
import Dictionaries from "../../utils/Dictionaries.js";
export default {
  props: {
    ishide: {
      type: Boolean,
      default: true
    },
    selectKey: {
      type: String,
      default: "id"
    },
    size:{
      type: String,
      default: 'medium'
    },
    selectLable: {
      type: String,
      default: "title"
    },
    value: {
      type: String,
      default: ""
    },
    clearable:{
      type: Boolean,
      default: true
    },
    eleDisabled: {
      type: Boolean,
      default: false
    },
    optDisabled: {
      type: Number,
      default:0
    },
    p: {
      type: String,
      default: "R"
    },
    colspan: {
      type: String,
      default: "24"
    },
    labelWidth: {
      type: String,
      default: "140"
    },
    labelTitle: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    codetype: {
      type: String,
      default: ""
    },
    property: {
      type: String,
      default: ""
    },
    datas: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: ""
    },
    isChange: {
      type: Boolean,
      default: false
    },
    isClick: {
      type: Boolean,
      default: false
    },
    isBlur: {
      type: Boolean,
      default: false
    },
    isFocus: {
      type: Boolean,
      default: false
    },
    isPage: {
      type: Boolean,
      default: false
    },
    isPageFilter: {
      type: Boolean,
      default: false
    },
    SelectFilterData: {
      type: String,
      default: ""
    },
    pageData: {
      type: String,
      default: "formData"
    },
    api: {
      type: String,
      default: ""
    },
    isRed: {
      type: Boolean,
      default: false
    },
    isCodeType: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    selectClick: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      selectoptions: [],
      show: false,
      text: "",
      selectList: [],
      selValue: "",
      time: null,
      a: "",
      id: ""
    };
  },
  created() {
    this.selValue = this.value;
    if (this.options.length == 0) {
      this.selectoptions = Dictionaries[this.name];
      console.log(Dictionaries[this.name]);
      
      
    }
  },
  computed: {},
  watch: {
    value(newvalue, oldvalue) {
      this.selValue = newvalue;
    }
  },
  mounted() {},
  methods: {
    selectData() {},
    onChange(val) {
      
      
      this.selValue = val;
      this.$emit("select-message", val, this.name);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
